<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置背景图片</title>
    <style>
      #d1 {
        width: 200px;/*设置当前div的宽度*/
        height: 200px;
        background-color: purple;
        background-image: url("image/1.png");/*设置背景图片 默认是平铺效果(图片沾满整个空间)*/
        background-size: 100px 100px;/*设置背景图片的大小 第一个参数表示宽度 第二个参数表示高度*/
      }
      #d2 {
        width: 200px;
        height: 200px;
        background-color: purple;
        background-image: url("image/1.png");
        background-size: 100px 100px;
        background-repeat: no-repeat; /*禁用平铺效果*/
        background-position: center; /*设置图片的位置*/
      }
      #d3 {
        width: 200px;
        height: 200px;
        background-color: purple;
        background-image: url("image/1.png");
        background-size: 100px 100px;
        background-repeat: no-repeat;
        background-position: 50% 50%;/*设置图片的位置坐标 第一个参数表示X轴 第二个参数表示Y轴*/
      }
    </style>
</head>
<body>
  <div id="d1"></div><br>
  <div id="d2"></div><br>
  <div id="d3"></div>
</body>
</html>